<template>
    <div class="container">
        <div class="table-container">
            <el-row v-if="wo == bieren">
                <el-col :span="24" class="justify-end">
                    <el-button size="small" @click=handleCreate type="primary" round>新建收藏夹</el-button>
                </el-col>
            </el-row>

            <el-table class="el-table" :data="collectionlist" stripe style="width: 100%">
                <el-table-column prop="id" label="收藏夹id" width="300">
                </el-table-column>
                <el-table-column prop="collectionName" label="收藏夹名" width="800">
                </el-table-column>
                <el-table-column v-if="wo == bieren" label="" width="100">
                    <template v-slot="scope">
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
                <el-table-column v-if="wo != bieren" label="Actions" width="200">
                    <template v-slot="scope">
                        <el-button size="mini" type="primary" @click="AddSubscribtion(scope.row.id)">订阅</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>




</template>
<script>
import axios from "axios";

export default {
    data() {
        return {
            user_id: '',
            personalobject: Object,
            collectionlist: [],
            newcollectionName: '',
            wo: localStorage.getItem('userId'),
            bieren: localStorage.getItem('userpageId'),
        }
    },
    methods: {
        AddSubscribtion(id) {
            axios({
                url: "/api/subscribe/subscribeCollection",
                method: 'post',
                headers: {
                    "HOSHINO_T_KK": localStorage.getItem("userToken"),
                },
                data: {
                    collection_id: id

                }
            })
                .then(response => {
                    console.log(response);
                    // this.collectionlist = Array.isArray(response.data.data) ? response.data.data : [];
                })
                .catch(error => {
                    console.error('Error ', error);
                })
        },

        fetchCollections() {
            // const userId = localStorage.getItem('userId');
            axios({
                url: "/api/collection/getUserCollection",
                method: 'post',
                headers: {
                    "HOSHINO_T_KK": localStorage.getItem("userToken"),
                },
                data: {
                    user_id: localStorage.getItem('userpageId')

                }
            })
                .then(response => {
                    console.log(response);
                    this.collectionlist = Array.isArray(response.data.data) ? response.data.data : [];
                })
                .catch(error => {
                    console.error('Error ', error);
                })

        },
        handleDelete(id) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    url: "/api/collection/delCollection",
                    method: 'post',
                    headers: {
                        "HOSHINO_T_KK": localStorage.getItem("userToken"),
                    },
                    data: {
                        collection_id: id

                    }
                })
                    .then(response => {
                        console.log(response.data.data);
                        this.fetchCollections();


                    })
                    .catch(error => {
                        console.error('Error ', error);
                    })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        handleCreate() {
            this.$prompt('请输入收藏夹名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                this.newcollectionName = value;
                axios({
                    url: "/api/collection/create",
                    method: 'post',
                    headers: {
                        "HOSHINO_T_KK": localStorage.getItem("userToken"),
                    },
                    data: {
                        collection_name: this.newcollectionName
                    }
                })
                    .then(response => {
                        console.log(response);
                        console.log(response.data.data);
                        this.fetchCollections();

                    })
                    .catch(error => {
                        console.error('Error ', error);
                    })


                this.$message({
                    type: 'success',
                    message: '创建成功 '
                });


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消创建'
                });
            });

        }


    },
    created() {
        this.fetchCollections();


    },


}
</script>

<style scoped>
.table-container {
    /* 可选：如果你需要额外的样式或确保滚动条出现 */
    overflow-y: auto;
    /* 允许垂直滚动 */
    height: 800px;
    /* 比表格稍高，以显示滚动条（如果需要的话） */
}

.justify-end {
    padding-right: 8%;
    display: flex;
    justify-content: flex-end;
    /* 使子元素在水平方向上居右 */
    align-items: center;
    /* 可选，如果你希望子元素在垂直方向上居中也加上这行 */
}

.container {
    background-color: white;
    height: 100%;
    width: 90%;

}
</style>
